<template>
	<view class="indexContainer">
		<!-- 头部搜索 -->
		<Search></Search>
		<!--banner轮播图  -->
		<swiper class="bannerSwiper" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
			<swiper-item class="swiperItem" v-for="(banner, index) in floors[0].data.items" :key="index"><image class="itemImg" :src="banner.item.pic_url"></image></swiper-item>
		</swiper>
		<!-- nav导航 -->
		<view class="navWrap">
			<view class="navItem" v-for="(nav, index) in floors[1].data.items" :key="index">
				<image class="navImg" :src="nav.item.pic_url"></image>
				<text class="navText">{{ nav.item.title }}</text>
			</view>
		</view>
		<!-- 推荐recommend -->
		<view class="recommendWrpa">
			<view class="recommendItem" v-for="(recommend, index) in floors[2].data.rows[0].items" :key="index"><image class="itemImg" :src="recommend.item.pic_url"></image></view>
		</view>
		<!-- 众筹crowdfunding -->
		<view class="crowdFundingWrap">
			<view class="crowdFunding">
				<view class="cf_header">
					<Title title="小米有品众筹"></Title>
					<image class="bgc" src="../../static/images/home/crowdfundingbg.png"></image>
				</view>
				<view class="cf_main">
					<view class="main_up">
						<view class="main_up_left">
							<view class="goods">
								<text class="name">{{ floors[3].data.items[0].item.name }}</text>
								<text class="summary">{{ floors[3].data.items[0].item.summary }}</text>
								<text class="price">￥{{ floors[3].data.items[0].item.price_min / 100 || 999 }}</text>
							</view>
							<view class="support">
								支持人数
								<text>{{ floors[3].data.items[0].item.saled_count }}</text>
								/ 完成度
								<text>{{ floors[3].data.items[0].item.progress }}%</text>
							</view>
						</view>

						<view class="main_up_right"><image :src="floors[3].data.items[0].item.pic_url"></image></view>
					</view>
					<view class="main_progress"><view :style="{ width: width + 'rpx' }" class="currt_progress"></view></view>

					<view class="main_down"><CrowdFunding v-for="(goods, index) in crowdFunding" :key="goods.iid" :goods="goods"></CrowdFunding></view>
				</view>
			</view>
		</view>
		<!-- 上新精选 -->
		<view class="hotGoodsWrap">
			<view class="cotent">
				<Title title="上新精选"></Title>
				<scroll-view class="hot_goods_swiper" scroll-x="true" enable-flex>
					<view class="goods_item" v-for="(goods, index) in floors[4].data.items" @click="toDetail(goods.item)" :key="goods.iid">
						<image class="goods_img" :src="goods.item.pic_url"></image>
						<text class="goods_text">{{ goods.item.name }}</text>
						<image v-if="goods.item.tags[0].name === '预售'" class="pre_img" src="../../static/images/home/pre-sell.png"></image>
					</view>
				</scroll-view>
			</view>
		</view>
		<!-- 有品秒杀 -->
		<view class="seckillWrap">
			<view class="cotent">
				<Title title="有品秒杀"></Title>
				<scroll-view class="seckill_swiper" scroll-x="true" enable-flex>
					<!-- <view class="goods_item" >
						<image class="goods_img" src="../../static/images/mylove.jpg" ></image>
						<view class="goods_text">
							<text class="goods_text_left">￥999</text>
							<text class="goods_text_right">￥1999</text>
						</view>												
					</view> -->
					<view class="goods_item" v-for="(goods, index) in floors[5].data.goods" :key="goods.iid">
						<image class="goods_img" :src="goods.item.img"></image>
						<view class="goods_text">
							<text class="goods_text_left">￥{{ goods.item.flash_price / 100 }}</text>
							<text class="goods_text_right">￥{{ goods.item.market_price / 100 }}</text>
						</view>
					</view>
				</scroll-view>

				<view class="countdown">
					<text class="nextTime">{{ countdown.nextTime }}点场</text>
					<text class="disHour time">{{ countdown.disHour }}</text>
					:
					<text class="disMinutes time">{{ countdown.disMinutes }}</text>
					:
					<text class="disSeconds time">{{ countdown.disSeconds }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import request from '../../utils/request.js';
import { mapGetters } from 'vuex';
import Title from './Title/Title.vue';
import CrowdFunding from './CrowdFunding/CrowdFunding.vue';
export default {
	components: {
		Title,
		CrowdFunding
	},
	data() {
		return {
			countdown: {} // 距离第二天下午16点的倒计时
		};
	},
	computed: {
		...mapGetters(['indexData']),
		// floor 里面存贮着主页所有楼层所需的东西，从上到下一一对应
		floors() {
			return this.indexData.floors || [];
		},
		// 众筹进度条宽度进度
		width() {
			return (this.floors[3]?.data.items[0].item.progress / 100) * 351 * 2;
		},
		// 众筹商品列表
		crowdFunding() {
			return this.floors[3]?.data.items.slice(1).sort((item1, item2) => {
				if (item1.item.tags) {
					return -1;
				} else {
					return 1;
				}
			});
		}
	},
	// 这两个里面写了关于秒杀的定时器
	onShow() {
		this.timer = setInterval(() => {
			let startTime = new Date();
			let startYear = startTime.getFullYear();
			let startMonth = startTime.getMonth();
			let startDay = startTime.getDate();
			let startHour = startTime.getHours();
			let startMinutes = startTime.getMinutes();
			let startSeconds = startTime.getSeconds();
			let endTime = new Date(startYear, startMonth, startDay + 1, 16, 0, 0);

			let endHour = endTime.getHours();
			let endMinutes = endTime.getMinutes();
			let endSeconds = endTime.getSeconds();

			let disHour = 24 - startHour + endHour - 1;
			let disMinutes = 60 - startMinutes - 1;
			let disSeconds = 60 - startSeconds - 1;
			let nextTime = 16;
			// 判断今天有没有过今天16点

			if (startHour < 16) {
				disHour = 16 - startHour - 1;
			}

			if (disHour < 10) {
				disHour = '0' + disHour;
			}
			if (disMinutes < 10) {
				disMinutes = '0' + disMinutes;
			}
			if (disSeconds < 10) {
				disSeconds = '0' + disSeconds;
			}
			this.countdown = { nextTime, disHour, disMinutes, disSeconds };
			// console.log(disHour,disMinutes,disSeconds);
		}, 1000);
	},
	onHide() {
		clearInterval(this.timer);
		this.timer = null;
	},
	mounted() {
		this.getIndexData();
	},
	methods: {
		getIndexData() {
			this.$store.dispatch('getIndexData');
		},
		toDetail(item) {
			let goods = {
				isChecked: true,
				count: 1,
				gid: item.gid,
				productName: item.name,
				imageUrl: item.pic_url,
				attributeValues: item.summary,
				properties: {
				addedCartPrice: (item.price_min/100).toFixed(2) 
				}
			};
			// console.log(goods)
			// this.$store.commit('ADD_ONE_PRODUCTITEMS',goods)
			wx.setStorageSync('goods',goods)
			wx.navigateTo({
				// url:'/pages/detail/detail?goods=' + JSON.stringify(goods)
				url:'/pages/detail/detail'
			})
		}
	}
};
</script>

<style lang="scss">
.indexContainer {
	height: 100%;
	// banner轮播图
	.bannerSwiper {
		height: 320rpx;
		.swiperItem {
			height: 100%;
			width: 100%;
			.itemImg {
				width: 100%;
				height: 100%;
			}
		}
		.wx-swiper-dot {
			width: 16rpx; /*宽*/
			height: 5rpx; /*高*/
			background-color: #fff;
			border-radius: 0;
			margin-right: 4rpx;
			transform: translate(260rpx, -30rpx);
		}
		.wx-swiper-dot-active {
			height: 25rpx; /*高*/
		}
	}
	// nav导航
	.navWrap {
		height: 144rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		margin-bottom: 28rpx;
		// padding-top: 28rpx;
		// padding-left:20rpx;
		// padding-right:20rpx;
		padding: 28rpx 20rpx 0 20rpx;
		.navItem {
			height: 144rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			.navImg {
				width: 100rpx;
				height: 100rpx;
			}
			.navText {
				font-size: 24rpx;
			}
		}
	}

	// 推荐recommend
	.recommendWrpa {
		display: flex;
		justify-content: space-around;
		align-items: center;
		height: 262rpx;
		// background-color: skyblue;
		padding: 0 20rpx;
		.recommendItem {
			width: 24%;
			.itemImg {
				height: 242rpx;
				width: 100%;
			}
		}
	}
	// 众筹crowdFunding
	.crowdFundingWrap {
		padding: 0 20rpx;
		height: 646rpx;
		.crowdFunding {
			height: 100%;
			// background-color: skyblue;

			.cf_header {
				position: relative;
				height: 86rpx;
				.bgc {
					// z-index: -1;
					position: absolute;
					width: 100%;
					height: 120rpx;
					left: 0;
					top: 0;

					border-top-left-radius: 6px;
					border-top-right-radius: 6px;
					object-fit: cover;
					overflow: hidden;
				}
			}

			.cf_main {
				background-color: #ffffff;
				position: relative;
				height: 540rpx;
				// background-color: skyblue;
				display: flex;
				flex-direction: column;
				align-items: center;
				.main_up {
					padding: 0 20rpx;
					display: flex;
					.main_up_left {
						width: 402rpx;
						height: 252rpx;
						// background-color: pink;
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						.goods {
							display: flex;
							flex-direction: column;
							justify-content: space-between;
							text {
								margin-top: 10rpx;
							}

							.name {
								font-size: 30rpx;
								color: #333;
							}
							.summary {
								height: 32rpx;
								padding: 0 8rpx;
								background-color: rgb(244, 249, 227);
								font-size: 24rpx;
								color: rgb(125, 68, 2);
								overflow: hidden;
								white-space: nowrap;
								webkit-box-orient: vertical;
								text-overflow: ellipsis;
								border: 0.5px solid rgb(245, 235, 209);
							}
							.price {
								color: rgb(254, 31, 29);
								font-size: 28rpx;
							}
						}

						.support {
							font-size: 24rpx;
							color: #333333;
							text {
								color: rgb(238, 136, 66);
								padding: 0 8rpx;
							}
						}
					}
					.main_up_right {
						width: 264rpx;
						height: 264rpx;
						image {
							width: 264rpx;
							height: 264rpx;
						}
					}
				}
				.main_progress {
					position: relative;
					height: 8rpx;
					background-color: #e1e1e1;
					border-radius: 4rpx;
					width: 351px;
					overflow: hidden;
					.currt_progress {
						position: absolute;
						top: 0;
						left: 0;
						height: 8rpx;
						background-image: linear-gradient(to right, rgb(255, 200, 102), rgb(255, 88, 27));
						width: 10rpx;
						border-radius: 4rpx;
					}
				}
				.main_down {
					margin-top: 8rpx;
					padding: 0 20rpx;
					width: 668rpx;
					height: 244rpx;
					// background-color: #4CD964;
					display: flex;
					align-items: center;
					justify-content: space-between;
				}
			}
		}
	}

	// 上新精选
	.hotGoodsWrap {
		height: 380rpx;
		padding: 0 20rpx;
		.cotent {
			// background-color: skyblue;
			height: 380rpx;
			overflow: hidden;
			border-radius: 12rpx;
			background-color: #ffffff;
			.hot_goods_swiper {
				display: flex;
				// background-color: pink;
				height: 270rpx;
				padding: 0 20rpx;
				.goods_item {
					position: relative;
					margin-right: 5rpx;
					display: flex;
					flex-direction: column;
					align-items: center;
					// justify-content: space-between;
					.goods_img {
						height: 186rpx;
						width: 186rpx;
						border-radius: 4rpx 4rpx 0 0;
					}
					.goods_text {
						font-size: 22rpx;
						white-space: pre-wrap;
						width: 158rpx;
						text-align: center;
					}
					.pre_img {
						position: absolute;
						top: 0;
						left: 0;
						width: 60rpx;
						height: 32rpx;
					}
				}
			}
		}
	}
	// 有品秒杀
	.seckillWrap {
		margin-top: 20rpx;
		padding: 0 20rpx;
		height: 360rpx;
		.cotent {
			position: relative;
			border-radius: 12rpx;
			height: 340rpx;
			overflow: hidden;
			background-color: #ffffff;
			.seckill_swiper {
				height: 232rpx;
				display: flex;
				align-items: center;
				padding: 0 20rpx;
				.goods_item {
					height: 232rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					margin-right: 10rpx;
					.goods_img {
						height: 186rpx;
						width: 186rpx;
						border-radius: 4rpx;
					}
					.goods_text {
						display: flex;
						align-items: center;
						.goods_text_left {
							font-size: 28rpx;
							font-weight: bold;
							color: rgb(254, 31, 29);
						}
						.goods_text_right {
							margin: 6rpx 4rpx 0 4rpx;
							text-align: center;
							line-height: 28rpx;
							font-size: 20rpx;
							text-decoration: line-through;
							color: #999999;
						}
					}
				}
			}
			.countdown {
				position: absolute;
				top: 0;
				left: 180rpx;
				height: 86rpx;
				width: 231rpx;
				// background-color: pink;
				display: flex;
				align-items: center;
				color: rgb(203, 148, 59);
				.nextTime {
					color: #333333;
					font-size: 20rpx;
					margin-right: 10rpx;
				}
				.time {
					background-color: rgb(203, 148, 59);
					color: #ffffff;
					font-size: 24rpx;
					padding: 0 3rpx;
				}
			}
		}
	}
}
</style>
